<template>
  <transition name="move">
    <div class="pro-comm">
      <div class="comment">
        <div class="comment-menu">
          <ul class="clearfix comment-menu-wrap">
            <li class="active">
              <label>
                <input type="radio" name="type" checked="true" />
                全部评论(<em>999+</em>)
              </label>
            </li>

            <li>
              <label>
                <input type="radio" name="type" />
                追加评论(<em>999+</em>)
              </label>
            </li>

            <li>
              <label>
                <input type="radio" name="type" />
                差评(<em>999+</em>)
              </label>
            </li>
          </ul>
        </div>

        <div class="comment-con">
          <div class="comment-con-item">
            <div class="user-name">
              <p class="text">很长很长的Id</p>
            </div>

            <div class="comment-con-con">
              <div class="top">
                <span class="title">首次评论</span>
                <span class="text">挺好的 比预期的效果更好！加油</span>
              </div>

              <div class="type">
                <p class="type-item">
                  <span class="title">类型：</span>
                  <span class="text">标准</span>
                </p>

                <p class="type-item">
                  <span class="title">类型：</span>
                  <span class="text">标准</span>
                </p>

                <p class="type-item">
                  <span class="title">类型：</span>
                  <span class="text">标准</span>
                </p>

                <p class="date type-item">2018-12-12</p>

                <p class="handle type-item">
                                <span class="send">
                                    <i class="fa fa-address-book"></i>
                                    <em class="num">99</em>
                                </span>

                  <span class="like">
                                    <i class="fa fa-lock"></i>
                                    <em class="num">10</em>
                                </span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  export default {}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .comment
    min-height: 500px
    .comment-menu
      padding: 40px 0 20px
      ul.comment-menu-wrap
        wh(100%, 31px)
        line-height: 31px
        font-size: 0
        border: 1px solid #dadada
        background-color: $white
        li
          display: inline-block
          sc($font-small, #c8c8c8)
          label
            display: inline-block
            padding:0 20px
            cursor: pointer
            input
              position: relative
              top: -2px
              vertical-align: middle
            em
              margin:0 4px
          &.active
            color: $vice-color
    .comment-con
      .comment-con-item
        -webkit-box-sizing: border-box
        -moz-box-sizing: border-box
        box-sizing: border-box
        position: relative
        height: auto
        border-bottom: 1px solid #ccc
        .user-name
          ltposition(0, 0)
          bottom: 0
          width: 80px
          height: 100%
          padding:0 10px
          .text
            ltposition(0, 50%)
            bottom: 50%
            right: 0
            hh(14px)
            width: 100%
            margin-top: -7px
            text-align: center
            color: #646464
            no-wrap()
        .comment-con-con
          padding-left: 40px
          margin-left: 100px
          overflow: hidden
          .top
            hh(18px)
            margin:20px 0
            span
              &.title
                color: #aaa
              &.text
                color: $back
          .type
            position: relative
            margin-bottom: 20px
            font-size: 0
            p.type-item
              display: inline-block
              hh(20px)
              margin-right: 20px
              &:last-child
                margin-right: 0
              span
                font-size: $font-small
                &.title
                  color: #aaa
                &.text
                  color: #ccc
              &.date
                sc($font-small, #ccc)
              &.handle
                rtposition(10px, 0)
                .like, .send
                  margin-left: 20px
                  cursor: pointer
                i.fa
                  sc($font-medium-x, #aaa)
                em.num
                  vertical-align: middle
                  margin-left: 3px
                  sc($font-small, #ccc)

  .move-enter-active, .move-leave-active
    transiti(transform, .5s, ease)
  .move-enter
    -webkit-transform: translate3d(-100%, 0, 0)
    -moz-transform: translate3d(-100%, 0, 0)
    -ms-transform: translate3d(-100%, 0, 0)
    -o-transform: translate3d(-100%, 0, 0)
    transform: translate3d(-100%, 0, 0)
  .move-leave
    -webkit-transform: translate3d(100%, 0, 0)
    -moz-transform: translate3d(100%, 0, 0)
    -ms-transform: translate3d(100%, 0, 0)
    -o-transform: translate3d(100%, 0, 0)
    transform: translate3d(100%, 0, 0)
</style>